<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="GB2312">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>“设计创新驱动产业革命”青年领军人才高峰论坛</title>
</head>
<body style="overflow:hidden">
 
<style>
#container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	height: 100%
}
#show_num {
	width: 100%;
	background: #fff;
	height: 100%;
	padding:5% 0 3% 1%;
}
#num{ padding: 0 0 0 1.2%}
#start,#stop{margin:15% 4% 0 1%}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script>
$(document).ready(function(e) {
 	var flag;	 
	var arr = Array();	 
   	var begin_flag = true;	 
	var ret;
	var num;
	var max_num;  
	var repeat = true;  
	 
	var pic_0 = "images/0.png";
	var pic_1 = "images/1.png";
	var pic_2 = "images/2.png";
	var pic_3 = "images/3.png";
	var pic_4 = "images/4.png";
	var pic_5 = "images/5.png";
	var pic_6 = "images/6.png";
	var pic_7 = "images/7.png";
	var pic_8 = "images/8.png";
	var pic_9 = "images/9.png";
	 
	$("#max").blur(function(){
		 max_num = $("#max").val();
			if(parseInt(max) > 1000){
			alert("请输入9-999的整数");
			begin_flag = false;
			return false;
			}	
			else{
				arr=[];
				for(var i=0;i<=max_num;i++){
				arr.push(i) 
				}
				begin_flag = true;
				return true;
				}	
		})
	 
	$("#start").click(function(){
			if (begin_flag){
				flag= setInterval(rd,60);
				begin_flag = false;
			}						
		})
 
	$("#stop").click(function(){
		clearInterval(flag);
		if(!repeat)
			no_repeat();			
		begin_flag = true;
	})
 
	function rd(){			
			num = arr[Math.floor(Math.random()*arr.length)]; 
			var hundred,figures,theunit;
			hundred = Math.floor(num/100);	
			figures = Math.floor(num%100/10);
			theunit = Math.floor(num%10);	
		 
			$("#num_1").css("background","url(images/"+hundred+".png) no-repeat");
			$("#num_2").css("background","url(images/"+figures+".png) no-repeat");
			$("#num_3").css("background","url(images/"+theunit+".png) no-repeat");	
		    }	
 	
	function no_repeat(){
			 
			var arr_2 = Array();
			for(var i =0; i<arr.length;i++){
				if (arr[i] == num){
					continue;	 
					}
				else{
					arr_2.push(arr[i]);		 
					}
				}
				//alert(arr_2);
				if(arr_2.length == 1){	 
					for(var i=0;i<=max_num;i++){
						arr.push(i) 
						} 
					}
				else{	 
				arr = arr_2;						
				}
		}		
  	  });
</script>

<div id="container"> 
  
  <div data-role="page" id="pageone" style="background:#ffffff">
    <div data-role="content" style="text-align:center"> <img src="images/head.png" width="1000" style="margin:0 auto">
      <div style="width:20%; margin:0 auto; clear:both">
        <div style="float: left;font-size: 1.2em; padding: 3% 3% 3% 3%;width: 29%;">最大值:</div>
        <div style="width:60%; float:left">
          <input id="max" type="text">
          
        </div>
      </div>
      <div style="width:18%; margin:0 auto; clear:both"> 
        
        <br/>
		<a href="#pagetwo" data-transition="slide" style="text-decoration:none">
        <button>开始抽奖</button>
        </a> 
        
      </div>
      <div style="text-align:center;margin:50px 0">
<p style="margin:20px 0"></p>
</div>
    </div>
  </div>
   
  <div data-role="page" id="pagetwo"> 
    
    <a href="#pageone" data-transition="slide" data-direction="reverse">
    <div style="background: #3465c5"><img src="images/second_bg.png"> </div>
    </a>
    <div data-role="content" id="con__1">
      <p> 
        
      <div id="show_num">
        <div id="num" style="width:400px; margin:0 auto; height:250px;"> <span id="num_1" style="width:33%; padding-top:50%; float:left; background:url(images/0.png) no-repeat"></span> <span id="num_2" style="width:33%; padding-top:50%; float:left;background:url(images/0.png) no-repeat"></span> <span id="num_3" style="width:33%; padding-top:50%;background:url(images/0.png) no-repeat; float:left"></span> </div>
        <div style="width:400px; margin:0 auto; height:100px;"> 
          
          <button id="start" style="width:40%; float:left; height:50%; background:white">开始</button>
          <button id="stop" style="width:40%; float:left; height:50%; background:white">暂停</button>
           </div>
		  	<br/>
	<br/>	<br/><br/><br/><br/><br/><br/><br/><br/>
	<br/>
      </div>
    </div>
    </p>
	

    <div data-role="footer" id="footerxx" style="position:absolute; width:100%;">
      <h1>武汉理工大学艺术与设计学院</h1>
	    
    </div>
  </div>
  
</div>
<script type="text/javascript">
function show_box(id) {
	 jQuery('.widget-box.visible').removeClass('visible');
	 jQuery('#'+id).addClass('visible');
}
</script>
 
</body>
</html>